<script setup>
import { ElImage } from 'element-plus';
import url4 from "/src/assets/img/jz.jpg";
</script>

<template>
    <div class="Honor_box">
        <div v-for="(item, index) in 6" :key="index" class="Honor_image" :class="{ 'odd': index % 2 !== 0 }">
            <el-image fit="cover" :src="url4"></el-image>
        </div>
    </div>
</template>

<style scoped>
.Honor_box{
    margin: auto;
    margin-top: 20px;
    display: flex;
    flex-direction: row ; /* 垂直排列 */
    overflow: hidden;
    justify-content: center; 
    align-items: center;
}

.Honor_image {
    margin-right: 30px;
    overflow: hidden;
    width: 300px;
    height: 300px;
    border-radius: 15px;
}

.Honor_image .el-image{
    width: 100%;
    height: 100%;
}

/* 用于控制交错效果 */
.Honor_image.odd {
    margin-top: 100px; /* 奇数项向下偏移 */
}

.Honor_image:last-child{
    margin-right: 0px;
}
</style>
